<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    </style>
    <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
    <script src="http://hammerjs.github.io/dist/hammer-time.min.js"></script>
    <script src="/zoom/hammer-zoom.js"></script>
</head>

<body>
<!--     <h2 id="sc"></h2> -->
    <div id="div">
        <canvas id="canvas"></canvas>
    </div>
    <script>
    let width = window.innerWidth
    let height = window.innerHeight
    console.log(width, height)
    let c = document.getElementById("canvas");
    c.width = 400
    c.height = 400
    let ctx = c.getContext("2d");
    // ctx.fillStyle = "#FF0000";
    // ctx.fillRect(0, 0, 150, 75);
    let image = new Image()
    image.src = '/zoom/img.png'
    image.onload = function() {
        console.log('image', image.height, image.width)
        ctx.drawImage(image, 0, 0, width, width)
    }
    // let div = document.getElementById('div')
    let pic = new Zoom('#div');
    let scale = 1
    ctx.lineWidth = 5
    let lx = 0
    let ly = 0
    pic.onPan = function(ev) {
        console.log('ev', ev)
        // document.getElementById('sc').innerHTML = ev.scale
        if (ev.scale != 1)
            return

        let x = ev.center.x
        let y = ev.center.y

        ctx.fillStyle = "#FF0000";
        if (ev.type == 'panstart') {
            ctx.beginPath();
            ctx.moveTo(x, y);
        };
        if (ev.type == 'panmove') {
            ctx.lineTo(x, y);
            ctx.stroke();
        };
    }
    pic.init();
    </script>
</body>

</html>